<template>
  <div class="page-container" v-loading="loading">
    <div class="page-content">
      <div class="panel-container">
        <el-form size="mini" label-width="120px">
          <el-row :gutter="100">
            <el-col :span="12">
              <el-form-item label="信息UUID:">
                <div class="item-content" v-if="detail">{{ detail.id }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="拍卖名称:">
                <div class="item-content" v-if="detail">{{ detail.title }}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="100">
            <el-col :span="12">
              <el-form-item label="物资分类:">
                <div class="item-content" v-if="detail">{{ detail.cate }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="标签:">
                <div class="item-content" v-if="detail">{{ showLabels }}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="100">
            <el-col :span="12">
              <el-form-item label="信息分类:">
                <div class="item-content" v-if="detail">{{ showMsg(msgTypeList, detail.msg_type) }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公司名称:">
                <div class="item-content" v-if="detail">
                  {{ detail.company_name }}
                  <span v-if="detail.vip_id">【{{ detail.vip_id }}】</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="查看权限:">
                <div class="item-content" v-if="detail">{{ showMsg(viewPowerList, detail.view_power) }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人:">
                <div class="item-content" v-if="detail">{{ detail.user_name }}</div>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="报名开始时间:">
                <div class="item-content" v-if="detail">{{ detail.apply_start_time }}</div>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="联系电话:">
                <div class="item-content" v-if="detail">{{ detail.user_phone }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报名截止时间:">
                <div class="item-content" v-if="detail">{{ detail.apply_end_time }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="起拍价:">
                <div class="item-content" v-if="detail">{{ detail.start_sell_price }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公告发布时间:">
                <div class="item-content" v-if="detail">{{ detail.public_time }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="保证金:">
                <div class="item-content" v-if="detail">{{ detail.promise_price }}{{ showMsg(promiseUnitList, detail.promise_unit) }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="拍卖招标时间:">
                <div class="item-content" v-if="detail">{{ detail.sell_time }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="评估价:">
                <div class="item-content" v-if="detail">{{ showMsg(evaluationList, detail.evaluation, 'key') }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属地区:">
                <div class="item-content" v-if="detail">{{ detail.address }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="拍卖方式:">
                <div class="item-content" v-if="detail">{{ showMsg(sellTypeList, detail.sell_type) }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="公告图片:">
                <div class="item-content" v-if="detail && detail.images">
                  <viewer :images="showImages" class="img-box" ref="viewer" :options="viewerOptions">
                    <img v-for="item in showImages" :key="item" :src="item" class="img" />
                  </viewer>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="信息介绍:">
                <div class="item-content tinymce-content" v-if="detail" v-html="detail.desc"></div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="CRM关键词:">
                <div class="item-content" v-if="detail">{{ detail.key_words }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="源网址:">
                <div class="item-content" v-if="detail && detail.source_url">
                  <a class="link" :href="detail.source_url" target="_blank">
                    {{ detail.source_url }}
                  </a>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="原文链接:">
                <a :href="detail.paper_url" class="link" target="_blank" v-if="detail && detail.paper_url">
                  {{ detail.paper_url }}
                </a>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="附件:">
                <div class="item-content" v-if="detail">
                  <div class="file-box" v-for="item in showFiles" :key="item">
                    <a class="link" :href="item" download="item" target="_blank">
                      {{ item }}
                    </a>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="fixed-container">
        <div class="fixed-content">
          <div class="panel-container">
            <div class="panel-content">
              <div class="panel-line flex-center">
                <el-button type="info" @click="handleClose" size="mini">关闭</el-button>
                <el-button type="warning" @click="handleLink" size="mini" v-if="detail && (detail.sts === 1 || detail.sts === 2 || detail.sts === 3)">访问页面</el-button>
                <el-button :loading="loading" type="primary" @click="handleNext" size="mini">查看下一条</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { apiNoticeDetail, apiNoticeSelect, apiNoticeEditGetNext } from '@/api/biddingNotice'

export default {
  name: 'NoticeDetail',
  data() {
    return {
      loading: false,
      detail: null,
      tableQuery: '',
      viewerOptions: {
        button: true,
        navbar: false,
        title: true,
        toolbar: false,
        tooltip: false,
        movable: false,
        zoomable: true,
        rotatable: false,
        scalable: true,
        transition: false,
        fullscreen: false,
        keyboard: true,
      },
      msgTypeList: [
        { label: '拍卖', value: 1 },
        { label: '招标', value: 2 },
      ],
      viewPowerList: [
        { label: '付费会员', value: 1 },
        { label: '注册会员', value: 2 },
      ],
      promiseUnitList: [
        { label: '万', value: 1 },
        { label: '元', value: 2 },
      ],
      sellTypeList: [
        { label: '网络拍卖', value: 1 },
        { label: '现场拍卖', value: 2 },
        { label: '其他', value: 3 },
      ],
      evaluationList: [],
    }
  },
  computed: {
    showImages() {
      if (!this.detail && !this.detial.images) {
        return []
      }
      return this.detail.images.split('|')
    },
    showFiles() {
      if (!this.detail && !this.detail.files) {
        return []
      }
      return this.detail.files.split('|')
    },
    showLabels() {
      if (!this.detail) {
        return ''
      }
      let key_words = this.detail.labels
      let new_marks = ''
      if (this.detail.new_marks) {
        if (typeof this.detail.new_marks === 'string') {
          new_marks = JSON.parse(this.detail.new_marks)
        } else {
          new_marks = this.detail.new_marks
        }
        new_marks = new_marks.map((item) => item.name).join(',')
      }
      if (key_words && new_marks) {
        return key_words + ',' + new_marks
      } else {
        return key_words + new_marks
      }
    },
  },
  mounted() {
    this.queryId = this.$route.query.id
    this.init()
  },
  destroyed() {},
  methods: {
    init() {
      const tableQuery = window.localStorage.getItem('notice-edit-table-query')
      if (tableQuery) {
        this.tableQuery = JSON.parse(tableQuery)
        this.tableQuery.position++
        this.tableQuery.is_next = 1
      } else {
        this.tableQuery = {}
        this.tableQuery.position = 1
        this.tableQuery.is_next = 1
      }
      this.getSelectList()
    },
    // 获取下拉数据
    getSelectList() {
      apiNoticeSelect().then((res) => {
        const { evaluation } = res
        this.evaluationList = evaluation
        this.getDetail()
      })
    },
    // 获取详情
    getDetail() {
      this.loading = true
      apiNoticeDetail({ id: this.queryId })
        .then((res) => {
          this.loading = false
          this.detail = res.data
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 访问页面
    handleLink() {
      window.open(`https://www.feijiu.net/gonggao/${this.detail.number_id}.html`)
    },
    // 查看下一条
    handleNext() {
      this.loading = true
      apiNoticeEditGetNext(this.tableQuery)
        .then((res) => {
          this.loading = false
          this.detail = res.data
          this.tableQuery.position++
        })
        .catch(() => {
          this.loading = false
        })
    },
    showMsg(list, val, labelName, valueName) {
      if (!this.detail || !list) {
        return
      }
      if (!labelName) {
        labelName = 'label'
      }
      if (!valueName) {
        valueName = 'value'
      }
      const item = list.find((item) => item[valueName] === val)
      if (item) {
        return item[labelName]
      } else {
        return ''
      }
    },
    // 关闭
    handleClose() {
      this.$bus.$emit('closeSelectedTag', this.$route)
    },
  },
}
</script>

<style scoped lang="scss">
@import url(~@/styles/tinymce.scss);
.page-content {
  padding-bottom: 40px;
}
.img {
  width: 148px;
  height: 148px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  margin: 0 8px 8px 0;
  position: relative;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
}
.fixed-container {
  position: fixed;
  right: 0;
  bottom: 0;
  width: calc(100% - 140px);
  padding: 0 10px;
  z-index: 100;
  .panel-container {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 6px;
    margin: 0;
  }
}
.tinymce-content {
  overflow: auto;
}
</style>
